<template>
  <div>
    <m-dialog
      top="8vh"
      width="90%"
      :title="title"
      :show-close="true"
      :lock-scroll="true"
      :visible.sync="data_visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :confirm-disabled="getListSelected().length === 0 ? true : false"
      @closeBtn="dialogDestroy"
      @refuse="dialogClose"
      @confirm="dialogConfirm"
    >
      <template #content>
        <div class="main">
          <product-add-dialog-product-list-component
            ref="product"
            :type="type"
            :query="query"
            :fetcher="fetcher"
            :store="store"
            @selectionChange="productListSelectionChange"
          />
        </div>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">
            取 消
          </el-button>
          <el-button
            type="primary"
            :disabled="getListSelected().length === 0"
            @click="dialogConfirm"
          >
            确 定
          </el-button>
        </div> -->
      </template>
    </m-dialog>
  </div>
</template>

<script>
import { ApiMMallWeb } from '@services/api';
import ProductAddDialogProductListComponent from './product-add.dialog.product-list.component.vue';

export default {
  name: 'ProductAddDialogComponent',
  components: { ProductAddDialogProductListComponent },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    title: {
      type: String,
      default: '添加产品'
    },
    query: {
      type: Object,
      default() {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    fetcher: {
      type: Function,
      default() {}
    },
    store: {
      type: null,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      data_visible: true,
      // disabled: true,
      data_tabs_active_name: 'product_list',
      data_product_list_selected: [],
      data_order_template_selected: {}
    };
  },
  computed: {
    apiMMallWeb() {
      return new ApiMMallWeb(this.fetcher);
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(val) {
        this.data_visible = val;
      }
    }
  },
  methods: {
    dialogDestroy() {
      this.data_visible = false;
      this.$emit('destroy', true);
      this.$emit('update:visible', false);
    },
    dialogClose() {
      this.data_visible = false;
    },
    productListSelectionChange(selectedData) {
      this.data_product_list_selected = selectedData;
    },
    getListSelected() {
      if (this.type === 'default') {
        return this.data_product_list_selected;
      }
      if (this.type === 'surgery') {
        if (this.data_tabs_active_name === 'product_list') {
          return this.data_product_list_selected;
        }
        if (this.data_tabs_active_name === 'order_template') {
          return this.data_order_template_selected;
        }
      }
      return [];
    },
    async dialogConfirm() {
      let result = this.getListSelected();
      if (
        this.type === 'surgery' &&
        this.data_tabs_active_name === 'order_template'
      ) {
        result = await this.pullProductListData(
          this.data_order_template_selected.id
        );
      }
      this.data_product_list_selected = [];
      this.$refs.product.clearSelection();
      this.$emit('confirm', result);
      this.$message({
        message: '添加成功',
        type: 'success'
      });
    },
    pullProductListData(id) {
      return this.apiMMallWeb.OrderTemplateProductOrderV1ApiPOST({
        query: {
          templateId: id
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
// /deep/ .el-tabs__header {
//   margin-bottom: 50px;
// }
// /deep/ .el-dialog__body {
//   padding: 10px 10px;
// }
// /deep/ .product-list .pagination {
//   margin-top: 0;
// }
/deep/.m-dialog .el-dialog__header {
  border: none;
}
/deep/.el-dialog__footer {
  margin-top: 15px;
  border: none;
  .el-button {
    border-radius: 3px;
  }
  .el-button--primary {
    color: #ffffff !important;
    border: 1px solid #4d84ff;
    background: #4d84ff;
  }
  .el-button--primary:hover {
    background-color: #719dff !important;
    border: 1px solid #719dff;
  }
  .el-button--primary.is-disabled {
    background-color: #acc5ff !important;
    border: 1px solid #acc5ff;
  }
}
/deep/.el-dialog__body {
  padding-bottom: 0;
}
.main {
  height: 70vh;
  min-height: 300px;
  display: flex;
  flex: 1;
  div {
    display: flex;
    flex-direction: column;
  }
}
</style>
